<template>
    <p-search-item class="p-customer-search" v-model="currentValue" :labelWidth="labelWidth" @reset="resetForm" @submit="submit">
        <template #search>
            <!-- <el-row>
                <el-col :span="24"> -->
                    <el-form-item label="请输入或选择项目编号">
                        <el-select v-model="currentValue.value" multiple filterable allow-create default-first-option placeholder="请选择项目编号">
                            <el-option v-for="item in groupingList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="请输入或选择项目编号">
                        <el-select v-model="currentValue.selectValue" placeholder="请选择" style="width:140%">
                            <el-option v-for="(item,index) in groupingList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button class="btn" @click="addCode">添加</el-button>
                    <el-input size="mini" disabled placeholder="请输入项目号，多项目号以','隔开"></el-input> -->
                <!-- </el-col>
            </el-row> -->
            <el-form-item label="请选择提交的起止日期">
                <el-date-picker
                    v-model="currentValue.value1"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择日期">
                </el-date-picker>
            </el-form-item>
        </template>
        <template #button>
            <el-button @click="dataExport">数据导出</el-button>
        </template>
    </p-search-item>
</template>
<script>
    import pSearchItem from '../../../components/p-search-box.vue';
    /**
     *   - Author by clj. on 2020.4.16
     *     demo file
     *              - 搜索组件
     * */
    export default {
        name: 'divisionalHome-search',
        components: { pSearchItem },
        props: {
            value: {
                // form表单对象
                type: Object,
                default: () => {}
            },
            labelWidth: {
                // label的宽度
                type: String,
                default: '150px'
            },
            searchFunc: Function, // 回调的提交函数
            clear: Function, // 清空的提交函数
            export: Function //导出的提交函数
        },
        data() {
            return {
                currentValue: this.value,
                loading: false,
                groupingList: [
                    { value: 'HTML', label: 'HTML' },
                    { value: 'CSS', label: 'CSS' },
                    { value: 'JavaScript', label: 'JavaScript' }
                ],   //分组
            };
        },
        watch: {
            value(val) {
                this.currentValue = val;
            },
            currentValue(val) {
                this.$emit('input', val);
            }
        },
        created() {
        },
        methods: {
            resetForm() {
                // 重置，所有form字段清空、或赋默认值。 Author by clj. on 2019.3.1
                this.currentValue = {};
                if (typeof this.clear === 'function') {
                    this.clear()
                }
            },
            submit() {
                // 查询。 Author by clj. on 2019.3.1
                if (typeof this.searchFunc === 'function') {
                    this.searchFunc()
                }
            },
            dataExport() {
                if (typeof this.export === 'function') {
                    this.export()
                }
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss">
    .p-customer-search {
        .el-form-item {
            p {
                color: #606266;
            }
            .el-select {
                width: 220px;
            }
        }
        .btn {
            height: 28px;
            line-height: 28px;
            margin-top: 2px;
        }
    }
</style>
